<template>
	<view>
		<view class="add-address">
			<view class="add-form">
				<view class="form-item">
					<text>收货人</text>
					<input class="input" @input="bindInputName" placeholder="请填写收货人姓名" :value="address.name" auto-focus>
				</view>
				<view class="form-item">
					<text>手机号码</text>
					<input class="input" @input="bindInputMobile" :value="address.mobile" placeholder="请填写收货人手机号">
				</view>
				<view class="form-item form-item-address" @tap="chooseRegion">
					<text>所在地区</text>
					<input class="input" :value="address.provinceName +  address.cityName + address.areaName" disabled="true" placeholder="省份、城市、区县" @focus="chooseRegion">
					<text class="iconfont icon-jiantou"></text>
				</view>
				<view class="form-item">
					<text>详细地址</text>
					<input class="input" @input="bindInputAddress" :value="address.address" placeholder="详细地址, 如街道、楼盘号等">
				</view>
				<view class="form-item" @tap="bindIsDefault" style="justify-content:space-between;">
					<text style="width:300rpx;">设为默认地址</text>
					<view class="form-item-switch" :class="(address.isDefault == 1 ? 'selected' : '')"></view>
				</view>
			</view>

			<view class="address-action">
				<button class="btn_orange_border" @tap="cancelAddress">取消</button>
				<button class="btn_orange" @tap="saveAddress">保存</button>
			</view>

			<view class="region-select" v-if="openSelectRegion">
				<view class="hd">
					<view class="region-selected">
						<view v-for="(item, index) in selectRegionList" :key="index" :class="'item ' + (item.id == 0 ? 'disabled' : '') + ' ' + ((regionType -1) === index ? 'selected' : '')" @tap="selectRegionType" :data-region-type-index="index">{{item.name}}</view>
					</view>
					<view :class="'done ' + (selectRegionDone ? '' : 'disabled')" @tap="doneSelectRegion">确定</view>
				</view>
				<view class="bd">
					<scroll-view scroll-y class="region-list">
						<view v-for="(item, index) in regionList" :key="index" :class="'item ' + (item.selected ? 'selected' : '')" @tap="selectRegion" :data-region-index="index">{{item.name}}</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="bg-mask" @tap="cancelSelectRegion" v-if="openSelectRegion"></view>
	</view>
</template>

<script>
const util = require("../../../utils/util.js");
const api = require("../../../config/api.js");
const check = require("../../../utils/check.js");
const app = getApp();

export default {
	data()
	{
		return {
			address: {
				id: 0,
				provinceId: 0,
				cityId: 0,
				areaId: 0,
				address: '',
				name: '',
				mobile: '',
				isDefault: 0,
				provinceName: '',
				cityName: '',
				areaName: ''
			},
			addressId: 0,
			openSelectRegion: false,
			selectRegionList: [ {
				id: 0,
				name: '省份',
				pid: 1,
				type: 1
			}, {
				id: 0,
				name: '城市',
				pid: 1,
				type: 2
			}, {
				id: 0,
				name: '区县',
				pid: 1,
				type: 3
			} ],
			regionType: 1,
			regionList: [],
			selectRegionDone: false
		};
	},

	components: {},
	props: {},
	onLoad: function (options)
	{
		// 页面初始化 options为页面跳转所带来的参数
		console.log(options);

		if (options.id && options.id != 0)
		{
			this.setData({
				addressId: options.id
			});
			this.getAddressDetail();
		}
	},
	onReady: function () { },
	onShow: function ()
	{// 页面显示
	},
	onHide: function ()
	{// 页面隐藏
	},
	onUnload: function ()
	{// 页面关闭
	},
	methods: {
		bindInputMobile(event)
		{
			let address = this.address;
			address.mobile = event.detail.value;
			this.setData({
				address: address
			});
		},

		bindInputName(event)
		{
			let address = this.address;
			address.name = event.detail.value;
			this.setData({
				address: address
			});
		},

		bindInputAddress(event)
		{
			let address = this.address;
			address.address = event.detail.value;
			this.setData({
				address: address
			});
		},

		bindIsDefault()
		{
			let address = this.address;
			address.isDefault = !address.isDefault;
			this.setData({
				address: address
			});
		},

		getAddressDetail()
		{
			let that = this;
			util.request(api.AddressDetail, {
				id: that.addressId
			}).then(function (res)
			{
				if (res.errno === 0)
				{
					if (res.data)
					{
						that.setData({
							address: res.data
						});
					}
				}
			});
		},

		setRegionDoneStatus()
		{
			let that = this;
			let doneStatus = that.selectRegionList.every(item =>
			{
				return item.id != 0;
			});
			that.setData({
				selectRegionDone: doneStatus
			});
		},

		chooseRegion()
		{
			console.log('选择地址');
			let that = this;
			this.setData({
				openSelectRegion: !this.openSelectRegion
			}); //设置区域选择数据

			let address = this.address;

			if (address.provinceId > 0 && address.cityId > 0 && address.areaId > 0)
			{
				let selectRegionList = this.selectRegionList;
				selectRegionList[ 0 ].id = address.provinceId;
				selectRegionList[ 0 ].name = address.provinceName;
				selectRegionList[ 0 ].pid = 0;
				selectRegionList[ 1 ].id = address.cityId;
				selectRegionList[ 1 ].name = address.cityName;
				selectRegionList[ 1 ].pid = address.provinceId;
				selectRegionList[ 2 ].id = address.areaId;
				selectRegionList[ 2 ].name = address.areaName;
				selectRegionList[ 2 ].pid = address.cityId;
				this.setData({
					selectRegionList: selectRegionList,
					regionType: 3
				});
				this.getRegionList(address.cityId);
			} else
			{
				this.setData({
					selectRegionList: [ {
						id: 0,
						name: '省份',
						pid: 0,
						type: 1
					}, {
						id: 0,
						name: '城市',
						pid: 0,
						type: 2
					}, {
						id: 0,
						name: '区县',
						pid: 0,
						type: 3
					} ],
					regionType: 1
				});
				this.getRegionList(0);
			}

			this.setRegionDoneStatus();
		},

		selectRegionType(event)
		{
			let that = this;
			let regionTypeIndex = event.target.dataset.regionTypeIndex;
			let selectRegionList = that.selectRegionList; //判断是否可点击

			if (regionTypeIndex + 1 == this.regionType || regionTypeIndex - 1 >= 0 && selectRegionList[ regionTypeIndex - 1 ].id <= 0)
			{
				return false;
			}

			this.setData({
				regionType: regionTypeIndex + 1
			});
			let selectRegionItem = selectRegionList[ regionTypeIndex ];
			this.getRegionList(selectRegionItem.pid);
			this.setRegionDoneStatus();
		},

		selectRegion(event)
		{
			let that = this;
			let regionIndex = event.target.dataset.regionIndex;
			let regionItem = this.regionList[ regionIndex ];
			let regionType = regionItem.type;
			let selectRegionList = this.selectRegionList;
			selectRegionList[ regionType - 1 ] = regionItem;

			if (regionType != 3)
			{
				this.setData({
					selectRegionList: selectRegionList,
					regionType: regionType + 1
				});
				this.getRegionList(regionItem.id);
			} else
			{
				this.setData({
					selectRegionList: selectRegionList
				});
			} //重置下级区域为空


			selectRegionList.map((item, index) =>
			{
				if (index > regionType - 1)
				{
					item.id = 0;
					item.name = index == 1 ? '城市' : '区县';
					item.pid = 0;
				}

				return item;
			});
			this.setData({
				selectRegionList: selectRegionList
			});
			that.setData({
				regionList: that.regionList.map(item =>
				{
					//标记已选择的
					if (that.regionType == item.type && that.selectRegionList[ that.regionType - 1 ].id == item.id)
					{
						item.selected = true;
					} else
					{
						item.selected = false;
					}

					return item;
				})
			});
			this.setRegionDoneStatus();
		},

		doneSelectRegion()
		{
			if (this.selectRegionDone === false)
			{
				return false;
			}

			let address = this.address;
			let selectRegionList = this.selectRegionList;
			address.provinceId = selectRegionList[ 0 ].id;
			address.cityId = selectRegionList[ 1 ].id;
			address.areaId = selectRegionList[ 2 ].id;
			address.provinceName = selectRegionList[ 0 ].name;
			address.cityName = selectRegionList[ 1 ].name;
			address.areaName = selectRegionList[ 2 ].name;
			this.setData({
				address: address,
				openSelectRegion: false
			});
		},

		cancelSelectRegion()
		{
			this.setData({
				openSelectRegion: false,
				regionType: this.regionDoneStatus ? 3 : 1
			});
		},

		getRegionList(regionId)
		{
			let that = this;
			let regionType = that.regionType;
			util.request(api.RegionList, {
				pid: regionId
			}).then(function (res)
			{
				if (res.errno === 0)
				{
					that.setData({
						regionList: res.data.map(item =>
						{
							//标记已选择的
							if (regionType == item.type && that.selectRegionList[ regionType - 1 ].id == item.id)
							{
								item.selected = true;
							} else
							{
								item.selected = false;
							}

							return item;
						})
					});
				}
			});
		},

		cancelAddress()
		{
			uni.navigateBack();
		},

		saveAddress()
		{
			let address = this.address;

			if (address.name == '')
			{
				util.showErrorToast('请输入姓名');
				return false;
			}

			if (address.mobile == '')
			{
				util.showErrorToast('请输入手机号码');
				return false;
			}

			if (address.areaId == 0)
			{
				util.showErrorToast('请输入省市区');
				return false;
			}

			if (address.address == '')
			{
				util.showErrorToast('请输入详细地址');
				return false;
			}

			if (!check.isValidPhone(address.mobile))
			{
				util.showErrorToast('手机号不正确');
				return false;
			}

			let that = this;
			util.request(api.AddressSave, {
				id: address.id,
				name: address.name,
				mobile: address.mobile,
				provinceId: address.provinceId,
				cityId: address.cityId,
				areaId: address.areaId,
				address: address.address,
				isDefault: address.isDefault
			}, 'POST').then(function (res)
			{
				if (res.errno === 0)
				{
					//返回之前，先取出上一页对象，并设置addressId
					var pages = getCurrentPages();
					var prevPage = pages[ pages.length - 2 ];
					console.log(prevPage);

					if (prevPage && prevPage.route == "pages/checkout/checkout")
					{
						prevPage.setData({
							addressId: res.data
						});

						try
						{
							uni.setStorageSync('addressId', res.data);
						} catch (e) { }

						console.log("set address");
					}

					uni.navigateBack();
				}
			});
		}

	}
};
</script>
<style>
page {
	height: 100%;
	background: #f4f4f4;
}

.add-address .add-form {
	background: #fff;
	width: 100%;
	height: auto;
	overflow: hidden;
}

.add-address .form-item {
	height: 120rpx;
	padding: 0 30rpx;
	border-bottom: 1px solid #eee;
	display: flex;
	align-items: center;
	position: relative;
}

.add-address .form-item text {
	display: block;
	width: 160rpx;
	color: #898b8d;
	font-size: 28rpx;
}

.iconfont {
	width: 20rpx !important;
}

.add-address .form-item-address:before {
	content: '';
	display: block;
	position: absolute;
	z-index: 2;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

.add-address .input {
	flex: 1;
	height: 44rpx;
	line-height: 44rpx;
	overflow: hidden;
}

.add-address .form-default {
	height: 120rpx;
	padding: 0 30rpx;
	border-bottom: 1px solid #eee;
	display: flex;
	align-items: center;
	position: relative;
}

.default-input {
	margin: 0 auto;
	display: block;
	width: 240rpx;
	height: 40rpx;
	padding-left: 50rpx;
	line-height: 40rpx;
	background: url('http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/checkbox-sed825af9d3-a6b8540d42.png')
		1rpx -448rpx no-repeat;
	background-size: 38rpx 486rpx;
	font-size: 28rpx;
}

.default-input.selected {
	background: url('http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/checkbox-sed825af9d3-a6b8540d42.png')
		0 -192rpx no-repeat;
	background-size: 38rpx 486rpx;
}

.add-address .address-action {
	position: fixed;
	bottom: 100rpx;
	left: 30rpx;
	right: 30rpx;
	overflow: hidden;
	display: flex;
	height: 100rpx;
	justify-content: space-around;
}

.add-address .cannel,
.add-address .save {
	flex: 1;
	height: 100rpx;
	text-align: center;
	line-height: 100rpx;
	font-size: 28rpx;
	color: #fff;
	border: none;
	border-radius: 0;
}

.add-address .cannel {
	background: #333;
}

.add-address .save {
	background: #b4282d;
}

.region-select {
	width: 100%;
	height: 600rpx;
	background: #fff;
	position: fixed;
	z-index: 10;
	left: 0;
	bottom: 0;
}

.region-select .hd {
	height: 108rpx;
	width: 100%;
	border-bottom: 1px solid #f4f4f4;
	padding: 46rpx 30rpx 0 30rpx;
}

.region-select .region-selected {
	float: left;
	height: 60rpx;
	display: flex;
}

.region-select .region-selected .item {
	max-width: 140rpx;
	margin-right: 30rpx;
	text-align: left;
	line-height: 60rpx;
	height: 100%;
	color: #333;
	font-size: 28rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.region-select .region-selected .item.disabled {
	color: #999;
}

.region-select .region-selected .item.selected {
	color: #b4282d;
}

.region-select .done {
	float: right;
	height: 60rpx;
	width: 60rpx;
	border: none;
	background: #fff;
	line-height: 60rpx;
	text-align: center;
	color: #333;
	font-size: 28rpx;
}

.region-select .done.disabled {
	color: #999;
}

.region-select .bd {
	height: 492rpx;
	width: 100%;
	padding: 0 30rpx;
}

.region-select .region-list {
	height: 492rpx;
}

.region-select .region-list .item {
	width: 100%;
	height: 104rpx;
	line-height: 104rpx;
	text-align: left;
	color: #333;
	font-size: 28rpx;
}

.region-select .region-list .item.selected {
	color: #b4282d;
}

.bg-mask {
	height: 100%;
	width: 100%;
	background: rgba(0, 0, 0, 0.4);
	position: fixed;
	top: 0; /*  #ifdef  H5  */
	top: calc(88rpx + constant(safe-area-inset-top));
	top: calc(88rpx + env(safe-area-inset-top)); /*  #endif  */
	left: 0;
	z-index: 8;
}

.btn_orange {
	font-size: 30rpx;
	height: 90rpx;
	width: 330rpx;
	line-height: 90rpx;
	padding: 0 20rpx;
	border-radius: 45rpx;
	background: linear-gradient(124deg, #f54c56 17%, #f95d20 83%);
	color: #fff;
}

.btn_orange_border {
	font-size: 30rpx;
	height: 90rpx;
	width: 330rpx;
	line-height: 86rpx;
	padding: 0 20rpx;
	border-radius: 45rpx;
	border: solid 2rpx #f54c56;
	background: #fff;
	color: #f54c56;
}

.form-item-switch  {
	border: solid 1px #EEE;
	height: 60rpx;
	width: 90rpx;
	border-radius: 60rpx;
	background-color: #E0E0E0;
}

.form-item-switch:before {
	content: '';
	display: block;
	width: 50rpx;
	height: 50rpx;
	margin: 3rpx 0 0 3rpx;
	background-color: #FFF;
	border-radius: 100%;
}

.form-item-switch.selected:before  {
	transform: translateX(30rpx);
}

.form-item-switch.selected {
	background-color: #f54c56;
}

.region-select .region-list .item.selected,
.region-select .region-selected .item.selected {
	color: #FD4D36;
}
</style>